<template>
  <div>
    <div class="menu">
        <div v-for="item in menu" :class="{active:item.id == activeIndex}" class="item" :key="item.id" @click="change(item)">
            {{ item.msg }}
        </div>
    </div>

    <component :is="com"></component>
  </div>
</template>
<script>
import Home from "./view/Home.vue";
import About from "./view/About.vue";
import List from "./view/List.vue";

export default {
  components: {
    Home,
    About,
    List,
  },
  methods:{
    change(item){
        this.activeIndex  = item.id;
        this.com = item.com; 
    }

  },
  data() {
    return {
      activeIndex: 1,
      menu: [
        { id: 1, msg: "首页", com: Home },
        { id: 2, msg: "关于", com: About },
        { id: 3, msg: "列表", com: List },
      ],
      com: "Home",
    };
  },
};
</script>
